<template>
	<view class="flex flex-y">
		<custom background="#fff" fixed="fixed" mode="2" title="客服" titleColor="#32343A" backColor="#32343A">
			<!-- 	<view slot="right" @tap.stop="show_user" class="iconfont icon-gengduo1 blod msg-more" style="color: #32343A;">
			</view> -->
		</custom>



		<!-- 列表 -->
		<view class="cccc-a">
			<view v-for="(item,index) in server_list" :key="index">
				<start v-if="item.start_class" :start="start_class" :startClass="item.start_class"></start>
				<!-- 文本 -->
				<template v-if="item.type == 'TEXT'">
					<msgText chatType="one" @show="show_item_user" :info="item"></msgText>
				</template>
				<!-- 文本 -->
				<!-- 图片 -->
				<template v-else-if="item.type == 'IMAGE'">
					<msgImage chatType="one" @show="show_item_user" :info="item"></msgImage>
				</template>
				<!-- 图片 -->
				<!-- 时间 -->
				<template v-else-if="item.type == 'TIME'">
					<msgTime :info="item"></msgTime>
				</template>
				<!-- <template v-else-if="item.type == 'VOICE'">
					<msgVoice chatType="one" :info="item"></msgVoice>
				</template> -->
				<!-- 时间 -->
			</view>
			<view style="height: 34rpx;"></view>
		</view>
		<!-- 列表 -->


		<!-- 输入 -->
		<chat :showIcon="false" :showVoice="false" :showLove="false" :showAddress="false" :showCard="false"  @send="send_text" @heightChange="heightChange"></chat>
		<!-- 输入 -->

		<view :style="{height,}"></view>

	</view>
</template>

<script>
	import msgText from '../../components/chat/msg-text.vue';
	import msgImage from '../../components/chat/msg-image.vue';
	import msgTime from '../../components/chat/msg-time.vue';
	import msgVoice from '../../components/chat/msg-voice.vue';
	import start from '../../components/chat/start.vue';

	export default {
		components: {
			msgText,
			msgImage,
			msgTime,
			// msgVoice,
			start
		},
		data() {
			return {
				customBar: getApp().globalData.customBar + 'px',
				message: '',
				height: '0',
				list: [

				],
				scrollTop: 99999,
				id: '',
				name: '',
				user: {
					//和谁聊天
				},
				auto: true,
				page: 1,
				loading: false,
				is_null: false,
				start_class: '',

			}
		},
	

		onReachBottom() {

			setTimeout(() => {
				this.auto = true;
				// this.showToast('触底了');
			}, 400);
		},
		onPageScroll(e) {
			clearTimeout(this.aaaa);
			this.aaaa = setTimeout(() => {
				this.auto = false;
				console.log('滚动');
			}, 50);
			if (e.scrollTop == 0) {
				this.click(() => {
					if (this.list.length < 30) return;
					// this.get_more();
				});
			}
		},
		onLoad(e) {

			getApp().globalData.user_id = e.id;
			this.id = e.id; //用户id



			uni.$on('to_last', () => {
				this.page_to_last(100);
			});

			// this.get_history(e.id);


			setTimeout(() => {
				this.$nextTick(() => {
					this.page_to_last(0);
				});
			}, 200);
			
			
			this.get_history();


		},
		onUnload() {
			if (uni) {
				uni.$off('to_last');
			}

		},
		methods: {
			heightChange(e) {

				this.height = (e) + 'px';
				setTimeout(() => {
					if (e > 0) {
						this.page_to_last(200, true);
					}
				}, 100);
			},
			send_text(e) {
				// this.list.push(e);
				this.auto = true;
				if (!e.other) e.other = {};
				if (getApp().globalData.CHAT) {
					getApp().globalData.CHAT.SEND({
						cmd: 8,
						role: 2,
						user: {
							id: this.user_info.id,
							name: this.user_info.name
						},
						message: {
							fromId: this.user_info.id,
							content: e.msg,
							type: e.type,
						}
					}, '发送给好友');
				}
				this.page_to_last();
			},
			page_to_last(time = 200, status = false) {
				// this.showToast(this.auto);
				if (!this.auto && status == false) return;
				this.scrollTop = this.scrollTop + 1000;

				setTimeout(() => {

					this.$nextTick(() => {
						uni.pageScrollTo({
							duration: time,
							scrollTop: this.scrollTop,
							success: () => {
								this.auto = true;
							}
						});
						setTimeout(() => {
							this.auto = true;
						}, 400);
					});
				}, 200);

			},
			show_user() {
				this.click(() => {
					// this.user.friend = true;
					// getApp().globalData.user_detail = this.clone(this.user);
					// this.toPage('/pages/chat/user?page=one&friend=true&id=' + this.id);
					this.toPage(`/pages/chat/user?page=one&friend=true&id=${this.id}&one=${true}`);
				});
			},
			show_item_user(user) {
				return ;
				this.toPage(`/pages/chat/user?page=one&friend=true&id=${this.id}&one=${true}`);
			},
			//获取历史消息
			get_history(id) {
				let date_now = new Date().getTime();
				this.request({
					url: '/cs',
					voice: true,
					data: {
						// id: this.id,
						// type: 'friend',
						// page: 1,
						// size: 30,
						// time: date_now,
					}
				}).then(res => {
					if (res.status == 200 && res.data) {
						let arr_old = [];
						let arr_new = res.data.reverse();
						arr_new.forEach(val => {
						


							val.mine = val.isFromUser;
							val.avatarUrl = val.mine ? this.user_info.avatarUrl:'https://jcypdata.59ls.com/im/1677553305130.jpg';
						});
						let arr = this.clone(arr_new.concat(arr_old));
						let arr_f = this.add_time(arr);

						
						this.vuexSet('server_list', arr_f);
						this.auto = true;
						this.page_to_last(100, true);
					}
				});
			},
			get_more() {
				if (this.loading || this.is_null) {
					return;
				}
				this.loading = true;
				let id = this.id;
				let arrr = this.chat_user_list.filter(val => {
					// console.log('val', val);
					return val.timestamp;
				});
				let time = arrr.length > 0 ? arrr[0].timestamp :
					'';
				this.request({
					url: '/chatlog',
					chat: true,
					data: {
						id: id,
						type: 'friend',
						page: this.page,
						size: 30,
						time: time,
					},
					loading: true,
				}).then(res => {
					this.loading = false;
					if (res.status == 200 && res.data && getApp().globalData.user_id == id) {
						this.page = this.page + 1;
						if (res.data.length == 0) {
							this.showToast('以下是全部聊天内容');
							this.is_null = true;
							return;
						}
						let arr_new = res.data.reverse();
						arr_new.forEach(val => {
							if (val.messageType !== undefined && val.messageType) {
								val.type = val.messageType;
								//新
							} else {
								val.type = 'TEXT';
								if (String(val.content).indexOf('img[') == 0) {
									val.type = 'IMAGE';
									val.content = String(val.content).substring(4, val.content.length - 1);
								}
								if (String(val.content).indexOf('emoji[') == 0) {
									val.type = 'IMAGE';
									val.content = String(val.content).substring(6, val.content.length - 1);
									val.type1 = 'emoji';
								}
								if (String(val.content).indexOf('voice[') == 0) {
									val.type = 'VOICE';
								}
								if (String(val.content).indexOf('shell[') == 0) {
									val.type = 'SHELL';
								}
								if (String(val.content).indexOf('notice[') == 0) {
									val.type = 'NOTICE';
								}
							}


							val.mine = (val.id == this.user_info.id ? true : false);
						});




						let arr_f = this.add_time(arr_new);
						let start_class = 'tag' + new Date().getTime();
						if (arr_f.length > 0) {
							arr_f[arr_f.length - 1].start_class = start_class;
						}
						this.start_class = start_class;
						arr_f = arr_f.concat(getApp().globalData.history[id]);

						getApp().globalData.history[id] = arr_f;
						this.vuexSet('chat_user_list', getApp().globalData.history[id]);
						// this.$nextTick(() => {
						// 	setTimeout(() => {
						// 		uni.pageScrollTo({
						// 			duration: 0,
						// 			selector: '.' + start_class,
						// 		});
						// 	}, 100);
						// });

					}
				}).catch(res => {
					this.loading = false;
				});
			},
			isToday(str) {
				if (new Date(str).toDateString() === new Date().toDateString()) {
					return true;
				} else if (new Date(str) < new Date()) {
					return false;
				}
			},
			add_time(arr) {
				let arr_f = [];
				let time = 1000 * 60 * 10;

				arr.forEach((val, index) => {
					if (index == 0 || (arr[index].updateTime - arr[index - 1].updateTime) > time) {
						if (this.isToday(val.updateTime)) {
							arr_f.push({
								content: this.dateFormat('HH:MM', new Date(val.updateTime)),
								type: 'TIME'
							});

						} else {
							arr_f.push({
								content: this.dateFormat('mm-dd HH:MM', new Date(val
									.updateTime)),
								type: 'TIME'
							});
						}
					}
					arr_f.push(val);
				});
				return arr_f;
			},
		},

	}
</script>

<style>
	page {
		background-color: #F2F2F3;
		/* min-height: 100vh; */
		/* min-height: 100vh; */

		touch-action: pan-y;
		overflow-scrolling: touch;
	}

	.msg-more {
		color: rgba(255, 255, 255, 0.65);
		font-size: 44rpx;
		font-weight: 400;
	}

	.cccc-a {
		animation: ccccc 0.7s;
	}

	@keyframes ccccc {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>
